<template>
  <div>
    <div>
      <el-card style="margin: 20px">
        <h1>{{ routerParams.title }}</h1>
<!--        <el-form :inline="true">-->
<!--          <el-radio v-model="barOrPie" label="bar">柱状图</el-radio>-->
<!--          <el-radio v-model="barOrPie" label="pie">饼图</el-radio>-->
<!--        </el-form>-->
      </el-card>
    </div>
    <div v-show="showValue === 'workWarning'">
      <el-card style="margin: 20px">
        <div style="display: flex">
          <div id="workloadEcharts" style="width: 50%;height: 500px"></div>
          <div style="width: 50%;height: 400px;display: flex">
            <div id="workParEcharts1" style="width: 50%;height: 500px"></div>
            <div id="workParEcharts2" style="width: 50%;height: 500px"></div>
          </div>
        </div>
      </el-card>
    </div>
    <div v-show="showValue === 'costWarning'">
      <el-card style="margin: 20px">
        <div style="display: flex">
          <div id="costWarningEcharts" style="width: 50%;height: 600px"></div>
          <div id="costPieChart" style="width: 50%;height: 500px"></div>
        </div>
      </el-card>
    </div>


    <div v-show="showValue === 'oneCostWarning'">
      <el-card style="margin: 20px">
        <div style="display: flex">
          <div id="oneCostWarningEcharts" style="width: 50%;height: 600px"></div>
          <div id="oneCostPieChart" style="width: 50%;height: 500px"></div>
        </div>
      </el-card>
    </div>



  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getWarningList, getWarningWellnameList, getWellWarning } from "@/api/vadmin/budget/approve/approveapi";
import { Decrypt } from "@/utils/AesHmacMD5";

export default {
  name: 'indexEcharts',
  data() {
    return {
      queryParams: {
        wellname: '',
      },
      wellnameOptions: [],
      barOrPie: 'bar',
      firstOrSecond: 1,
      routerParams: '', //路由跳转

      //判断是工作量还是成本
      showValue: '',
    };
  },
  mounted() {
    this.getRouterTitle()
    this.getWellWarning() //获取预警信息
  },
  watch: {
    '$route'(to, from) {
      console.log('路由跳转');
      this.getRouterTitle()
      this.filterData() //
      // 执行需要重新加载的逻辑
    }
  },

  methods: {
    getRouterTitle() {
      //接收路由参数
      this.routerParams = this.$route.query
      console.log(this.routerParams,'======获取路由val');
    },
    //查询预警信息
    getWellWarning() {
      getWellWarning(this.addDateRange({})).then(res => {
        let resData = JSON.parse(Decrypt(res.data));
        this.warningData = resData
        this.filterData()
      })
    },

    //筛选数组的方式
    filterData() {
      //筛选数组中title是this.routerParams的
      let filterData = this.warningData.filter(item => item.title === this.routerParams.title)
      console.log(filterData, '筛选');
      //根据数组中的type来判断是什么预警
      if (filterData[0].type === '0') {
        this.showValue = 'workWarning'
        console.log('工作量预警',JSON.parse(filterData[0].res));
        let finishData = [(JSON.parse(filterData[0].res).sjjc).toFixed(2),(JSON.parse(filterData[0].res).sjks)]
        let planData = [(JSON.parse(filterData[0].res).jhjc).toFixed(2),(JSON.parse(filterData[0].res).jhks)]

        let jcData = [(JSON.parse(filterData[0].res).sjjc).toFixed(2),(JSON.parse(filterData[0].res).jhjc).toFixed(2)]
        let ksData = [(JSON.parse(filterData[0].res).sjks),(JSON.parse(filterData[0].res).jhks)]

        this.$nextTick(() =>{
          this.workloadEcharts(finishData,planData)
          this.drawPieChart1(jcData) //试油比例
          this.drawPieChart2(ksData) //口数比例
        })

      }else if( filterData[0].type === '1') {
        this.showValue = 'oneCostWarning'
        // console.log('单井成本预警');
        console.log('工作量预警',JSON.parse(filterData[0].res));
        let data = [{
          jcValue: (JSON.parse(filterData[0].res).wcjc).toFixed(2),
          cbValue: (JSON.parse(filterData[0].res).cb).toFixed(2),
          jhcbValue: (JSON.parse(filterData[0].res).jhcb).toFixed(2),
        }]
        //新建数据
        let jhData = [(JSON.parse(filterData[0].res).jhcb).toFixed(2),(JSON.parse(filterData[0].res).jhfy).toFixed(2)]
        let sjData = [(JSON.parse(filterData[0].res).cb).toFixed(2),(JSON.parse(filterData[0].res).zjxj).toFixed(2)]
        let jhWorkData = [0,0,(JSON.parse(filterData[0].res).jhjc).toFixed(2)]
        let sjWorkData = [0,0,(JSON.parse(filterData[0].res).wcjc).toFixed(2)]



        this.$nextTick(() =>{
          this.oneCostWarning(jhData,sjData,jhWorkData,sjWorkData)
          this.oneCostPieChart(data)
        })
      }else if( filterData[0].type === '2') {
        this.showValue = 'costWarning'
        let data = [{
          jcValue: (JSON.parse(filterData[0].res).sjjc).toFixed(2),
          cbValue: (JSON.parse(filterData[0].res).cb).toFixed(2),
          fyValue: (JSON.parse(filterData[0].res).sjfy).toFixed(2),
        }]
        console.log('区域成本预警');
        this.$nextTick(() =>{
          this.costWarning(data)
          this.costPieChart(data)
        })
      }
    },

    //工作量绘图
    workloadEcharts(finishData,planData) {
      var chartDom = document.getElementById('workloadEcharts');
      var myChart = echarts.init(chartDom);
      var option;
      let colorList = ['#2074f1', '#f12020']

      option = {
        title: {
          subtext: [
            `{b|计划进尺}{a|${planData[0]}万米}{b|，实际完成进尺}{a|${finishData[0]}万米}`,
            `{b|计划钻井口数}{a|${planData[1]}口}{b|，实际完井口数}{a|${finishData[1]}口}`,
          ].join('\n'),
          subtextStyle: {
            rich: {
              a: {
                fontSize: 13,
                color: '#ff0000',
                fontWeight: 'bold',
                lineHeight: 30
              },
              b: {
                fontSize: 13,
                color: '#575757',
                fontWeight: 'bold',
                // lineHeight: 30
              },
            }
          }
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['完成', '计划'],
          top: '10%',
          right: '10%',
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: ['进尺(万米)', '钻井(口数)'],

          }
        ],

        yAxis: [
          {
            type: 'value',
          },
        ],
        grid: {
          top:'30%'
        },
        series: [
          {
            name: '完成',
            type: 'bar',
            data: finishData,
            barWidth: '20%',
            color: colorList[0],
            //柱状图上显示数字
            label: {
              show: true,
              position: 'top',
              // 修改formatter，根据x轴判断显示的单位
              formatter: function (params) {
                if (params.name === '进尺(万米)') {
                  return `完成钻井 ${params.value} 万米`; // 对应进尺加上“万米”
                } else if (params.name === '钻井(口数)') {
                  return `完成钻井 ${params.value} 口`; // 对应钻井加上“口”
                }
                return `完成 ${params.value}`; // 默认情况
              }
            }
          },
          {
            name: '计划',
            type: 'bar',
            data: planData,
            color: colorList[1],
            barWidth: '20%',
            label: {
              show: true,
              position: 'top',
              // 修改formatter，根据x轴判断显示的单位
              formatter: function (params) {
                if (params.name === '进尺(万米)') {
                  return `计划进尺 ${params.value} 万米`; // 对应进尺加上“万米”
                } else if (params.name === '钻井(口数)') {
                  return `计划钻井 ${params.value} 口`; // 对应钻井加上“口”
                }
                return `计划 ${params.value}`; // 默认情况
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    //试油饼图
    drawPieChart1(jcData) {
      var chartDom = document.getElementById('workParEcharts1');
      var myChart = echarts.init(chartDom);
      var option;

      // 计算完成进尺占计划进尺的比例
      var completed = jcData[0];  // 完成进尺
      var planned = jcData[1];    // 计划进尺

      // 如果计划进尺为 0，避免除零错误
      var ratio = planned === 0 ? 0 : (completed / planned).toFixed(2);

      option = {
        title: {
          text: '进尺完成比例',
          left: 'center',
          subtext: [
            `{b|计划进尺}{a|${planned}万米}{b|，实际完成进尺}{a|${completed}万米}.`,
            `{b|完成比例}{a|${ratio * 100}%}`,
          ].join('\n'),
          subtextStyle: {
            rich: {
              a: {
                fontSize: 13,
                color: '#ff0000',
                fontWeight: 'bold',
                lineHeight: 30
              },
              b: {
                fontSize: 13,
                color: '#575757',
                fontWeight: 'bold',
                // lineHeight: 30
              },
            }
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return params.name + ': ' + (params.value) + '万米';
          }
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: '70%',
        },
        grid: {
          top:'30%'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            color: ['#f12020','#2074f1', ],
            data: [
              { value: planned, name: '计划进尺' },
              { value: completed, name: '完成进尺' }
            ],
            label: {
              show: true,
              formatter: function (params) {
                // 自定义换行符
                var value = (params.value) + '万米';
                return params.name + '\n' + value;  // 添加换行符
              },
              position: 'outside',     // 标签位置
              alignTo: 'labelLine',    // 标签对齐方式
              fontSize: 12,            // 字体大小
            },
            labelLine: {
              show: true,
              length: 10,              // 引导线长度
              length2: 10,             // 引导线第二段长度
              smooth: true,            // 平滑曲线
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },

            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    //试油饼图
    drawPieChart2(jcData) {
      var chartDom = document.getElementById('workParEcharts2');
      var myChart = echarts.init(chartDom);
      var option;

      // 计算完成进尺占计划进尺的比例
      var completed = jcData[0];  // 完成进尺
      var planned = jcData[1];    // 计划进尺

      // 如果计划进尺为 0，避免除零错误
      var ratio = planned === 0 ? 0 : (completed / planned).toFixed(2);

      option = {
        title: {
          text: '钻井完成比例',
          left: 'center',
          subtext: [
            `{b|计划钻井口数}{a|${planned}口}{b|，实际完成钻井口数}{a|${completed}口}.`,
            `{b|完成比例}{a|${ratio * 100}%}`,
          ].join('\n'),
          subtextStyle: {
            rich: {
              a: {
                fontSize: 13,
                color: '#ff0000',
                fontWeight: 'bold',
                lineHeight: 30
              },
              b: {
                fontSize: 13,
                color: '#575757',
                fontWeight: 'bold',
                // lineHeight: 30
              },
            }
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return params.name + ': ' + (params.value) + '口';
          }
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: '70%',
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            color: ['#2074f1', '#f12020'],
            data: [
              { value: planned, name: '计划钻井口数' },
              { value: completed, name: '完成钻井口数' }
            ],
            label: {
              show: true,
              formatter: function (params) {
                // 自定义换行符
                var value = (params.value) + '口';
                return params.name + '\n' + value;  // 添加换行符
              },
              position: 'outside',     // 标签位置
              alignTo: 'labelLine',    // 标签对齐方式
              fontSize: 12,            // 字体大小
            },
            labelLine: {
              show: true,
              length: 10,              // 引导线长度
              length2: 10,             // 引导线第二段长度
              smooth: true,            // 平滑曲线
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },

            }
          }
        ]
      };

      option && myChart.setOption(option);
    },





    //单井成本预警绘图
    oneCostWarning(jhData,sjData,jhWorkData,sjWorkData) {
      var chartDom = document.getElementById('oneCostWarningEcharts');
      var myChart = echarts.init(chartDom);
      var option;
      let colorList= ['#2074F1','#F12020']

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          formatter: function (params) {
            let tooltipContent = '';
            params.forEach(function (param) {
              let unit = '';
              // 只处理非零的项
              if (param.value === 0) return; // 跳过值为0的项

              // 根据 xAxis 的类别判断单位
              if (param.name === '成本') {
                unit = ' 元/米'; // 成本和费用的单位
              } else if(param.name === '费用') {
                unit = ' 元'; // 成本和费用的单位

              } else if (param.name === '工作量') {
                unit = ' 万米'; // 工作量的单位
              }

              // 在前面添加对应的图例颜色
              tooltipContent += `<span style="display:inline-block;width:8px;height:8px;background-color:${param.color};border-radius:50%;margin-right:5px;"></span>`;
              tooltipContent +=
                param.seriesName + ' : ' + param.value + unit + '<br>';
            });
            return tooltipContent || '无数据'; // 如果没有数据，显示提示
          }
        },
        title: {
          subtext: [
            `{b|预算成本}{a|${jhData[0]}元/米}{b|，实际成本}{a|${sjData[0]}元/米}`,
            `{b|预算费用}{a|${jhData[1]}万元}{b|，实际结算费用}{a|${sjData[1]}万元}`,
            `{b|设计进尺}{a|${jhWorkData[2]}万米}{b|，实际完成进尺}{a|${sjWorkData[2]}万米}`,
          ].join('\n'),
          subtextStyle: {
            rich: {
              a: {
                fontSize: 13,
                color: '#ff0000',
                fontWeight: 'bold',
                lineHeight: 30
              },
              b: {
                fontSize: 13,
                color: '#575757',
                fontWeight: 'bold',
                // lineHeight: 30
              },
            }
          }
        },
        legend: {
          data: ['预算', '实际'],
          right: '5%',
        },
        grid: {
          top: '30%',
          left: '20%',
        },
        xAxis: [
          {
            type: 'category',
            data: ['成本', '费用'],
            axisPointer: {
              type: 'shadow'
            },
            // axisLabel: {
            //   formatter: function (value) {
            //     if (value === '成本' || value === '费用') {
            //       return value + '（元/米)';
            //     } else if (value === '工作量') {
            //       return value + '（万米)';
            //     }
            //     return value;
            //   }
            // }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额 元/米',
            axisLabel: {
              formatter: '{value} 元/米'
            }
          },
          // {
          //   type: 'value',
          //   name: '万米',
          //   axisLabel: {
          //     formatter: '{value} 万米'
          //   }
          // }
        ],
        series: [
          {
            name: '预算',
            type: 'bar',
            data: jhData,
            yAxisIndex: 0, // 使用第一个 yAxis（金额元/米）
            color: colorList[0],
            label: {
              show: true, // 显示标签
              position: 'top', // 标签显示在柱子的上方
              formatter: function (params) {
                let unit = '';
                if (params.name === '成本') {
                  unit = ' 元/米'; // 成本和费用单位
                } else if (params.name === '费用') {
                  unit = ' 万元'; // 工作量单位
                } else if (params.name === '工作量') {
                  unit = ' 万米'; // 工作量单位
                }
                return params.value !== 0 ? params.value + unit: ''; // 值为0时不显示
              },
              offset: [ -20, 0 ], // 向左偏移 10px，调整为你所需要的距离
            },
            barGap: '30%',
            barWidth: '20%',
          },
          {
            name: '实际',
            type: 'bar',
            color: colorList[1],
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: sjData,
            yAxisIndex: 0, // 使用第一个 yAxis（金额元/米）
            label: {
              show: true, // 显示标签
              position: 'top', // 标签显示在柱子的上方
              formatter: function (params) {
                let unit = '';
                if (params.name === '成本') {
                  unit = ' 元/米'; // 成本和费用单位
                } else if (params.name === '费用') {
                  unit = ' 万元'; // 工作量单位
                } else if (params.name === '工作量') {
                  unit = ' 万米'; // 工作量单位
                }
                return params.value !== 0 ? params.value + unit : ''; // 值为0时不显示
              },
              offset: [ 20, 0 ], // 向左偏移 10px，调整为你所需要的距离

            },
            barGap: '30%',
            barWidth: '20%',

          },
          // {
          //   name: '预算',
          //   type: 'bar',
          //   color: colorList[0],
          //   data: jhWorkData,
          //   yAxisIndex: 1, // 使用第二个 yAxis（万米）
          //   tooltip: {
          //     valueFormatter: function (value) {
          //       return value;
          //     }
          //   },
          //   label: {
          //     show: true, // 显示标签
          //     position: 'top', // 标签显示在柱子的上方
          //     formatter: function (params) {
          //       return params.value !== 0 ? params.value: ''; // 工作量的单位为万米
          //     }
          //   },
          //   barGap: '30%',
          //   barWidth: '20%',
          //
          // },
          // {
          //   name: '实际',
          //   color: colorList[1],
          //   type: 'bar',
          //   tooltip: {
          //     valueFormatter: function (value) {
          //       return value;
          //     }
          //   },
          //   data: sjWorkData,
          //   yAxisIndex: 1, // 使用第二个 yAxis（万米）
          //   label: {
          //     show: true, // 显示标签
          //     position: 'top', // 标签显示在柱子的上方
          //     formatter: function (params) {
          //       return params.value !== 0 ? params.value : ''; // 工作量的单位为万米
          //     }
          //   },
          //   barGap: '30%',
          //   barWidth: '20%',
          //
          // }
        ]
      };

      option && myChart.setOption(option);

    },
    //成本/费用比较饼图
    oneCostPieChart(data) {
      console.log(data)
      var chartDom = document.getElementById('oneCostPieChart');
      var myChart = echarts.init(chartDom);
      var option;



      option = {
        title: {
          text: '设计成本与实际成本比较',
          left: 'center',
          subtext: [
            `{b|预算成本}{a|${data[0].jhcbValue}元/米}{b|，实际结算成本}{a|${data[0].cbValue}元/米}`,
          ].join('\n'),
          subtextStyle: {
            rich: {
              a: {
                fontSize: 13,
                color: '#ff0000',
                fontWeight: 'bold',
                lineHeight: 30
              },
              b: {
                fontSize: 13,
                color: '#575757',
                fontWeight: 'bold',
                // lineHeight: 30
              },
            }
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return params.name + ': ' + (params.value) + '元/米';
          }
        },
        legend: {
          orient: 'vertical',
          right: 'right',
          top: '70%',
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            color: ['#2074f1', '#f12020'],
            data: [
              { value: data[0].jhcbValue, name: '设计成本' },
              { value: data[0].cbValue, name: '实际成本' }
            ],
            label: {
              show: true,
              formatter: function (params) {
                // 自定义换行符
                var value = (params.value);
                return params.name + '\n' + value + '元/米';  // 添加换行符
              },
              position: 'outside',     // 标签位置
              alignTo: 'labelLine',    // 标签对齐方式
              fontSize: 12,            // 字体大小
            },
            labelLine: {
              show: true,
              length: 10,              // 引导线长度
              length2: 10,             // 引导线第二段长度
              smooth: true,            // 平滑曲线
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },

            }
          }
        ]
      };

      option && myChart.setOption(option);
    },


    //区域成本预警
    costWarning(data) {
      console.log(data, '==================================>');
      var chartDom = document.getElementById('costWarningEcharts');
      var myChart = echarts.init(chartDom);
      var option;
      let colorList = ['#2074f1', '#f12020']


      option = {
        title: {
          subtext: [
            `{b|进尺设计成本}{a|${data[0].cbValue}元/米}{b|，进尺实际成本}{a|${data[0].fyValue}元/米}{b|,完成进尺}{a|${data[0].jcValue}万米}`,
          ].join('\n'),
          subtextStyle: {
            rich: {
              a: {
                fontSize: 13,
                color: '#ff0000',
                fontWeight: 'bold',
                lineHeight: 30
              },
              b: {
                fontSize: 13,
                color: '#575757',
                fontWeight: 'bold',
                // lineHeight: 30
              },
            }
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['钻井费用', '成本','完成进尺'],
          right: '5%',
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            // data: [this.routerParams.title],
            data: [this.routerParams.title],
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '万元/(万米)',
          },
          {
            type: 'value',
            name: '万米',
            position: 'right',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#05963b'
              }
            },
          }
        ],
        grid: {
          top:'30%'
        },
        series: [
          {
            name: '钻井费用',
            type: 'bar',
            data: [data[0].fyValue],
            barWidth: '10%',
            barGap: '100%',
            color: colorList[0],
            yAxisIndex: 0,
            label: {
              show: true,
              position: 'top',
              formatter: '进尺费用 {c} 元/米'
            }
          },
          {
            name: '成本',
            type: 'bar',
            data: [data[0].cbValue],
            barWidth: '10%',
            //柱子间距
            barGap: '100%',
            color: colorList[1],
            yAxisIndex: 0,
            label: {
              show: true,
              position: 'top',
              formatter: '成本 {c} 元/米'
            }
          },
          {
            name: '完成进尺',
            type: 'bar',
            data: [data[0].jcValue],
            barWidth: '15%',
            color: '#05963b',
            yAxisIndex: 1,
            label: {
              show: true,
              position: 'top',
              formatter: '完成进尺 {c} 万米'
            }
          },

        ]
      };

      option && myChart.setOption(option);
    },
    //成本/费用比较饼图
    costPieChart(data) {
      console.log(data)
      var chartDom = document.getElementById('costPieChart');
      var myChart = echarts.init(chartDom);
      var option;



      option = {
        title: {
          text: '设计成本与实际成本比较',
          left: 'center',
          subtext: [
            `{b|进尺设计成本}{a|${data[0].cbValue}元/米}{b|，进尺实际成本}{a|${data[0].fyValue}元/米}`,
          ].join('\n'),
          subtextStyle: {
            rich: {
              a: {
                fontSize: 13,
                color: '#ff0000',
                fontWeight: 'bold',
                lineHeight: 30
              },
              b: {
                fontSize: 13,
                color: '#575757',
                fontWeight: 'bold',
                // lineHeight: 30
              },
            }
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return params.name + ': ' + (params.value) + '元/米';
          }
        },
        legend: {
          orient: 'vertical',
          right: 'right',
          top: '70%',
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            color: ['#2074f1', '#f12020'],
            data: [
              { value: data[0].cbValue, name: '设计成本' },
              { value: data[0].fyValue, name: '实际成本' }
            ],
            label: {
              show: true,
              formatter: function (params) {
                // 自定义换行符
                var value = (params.value);
                return params.name + '\n' + value + '元/米';  // 添加换行符
              },
              position: 'outside',     // 标签位置
              alignTo: 'labelLine',    // 标签对齐方式
              fontSize: 12,            // 字体大小
            },
            labelLine: {
              show: true,
              length: 10,              // 引导线长度
              length2: 10,             // 引导线第二段长度
              smooth: true,            // 平滑曲线
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },

            }
          }
        ]
      };

      option && myChart.setOption(option);
    },


  }
}
</script>

<style scoped>
</style>
